<template>
    <div class="qilin-addressBook-import">
        <div class="qilin-addressBook-import-template" v-if="ownImportConfig.downloadTemplateConfig.isShow">
            <div class="qilin-addressBook-import-template-text">点击下载导入表格模板：</div>
            <div class="qilin-addressBook-import-template-file" @click="emits('importTemplate')">
                <img src="@/assets/images/file.png" alt="">
                <span>{{ownImportConfig.downloadTemplateConfig.templateName || "模板.xls"}}</span>
            </div>
        </div>
        <el-upload class="qilin-addressBook-import-upload" action="#" drag
            :auto-upload="false" :on-change="changeUpload" :show-file-list="false"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                <span>拖曳到此或点击上传</span>
                <div>（支持{{getFileTypeText}}文件格式）</div>
            </div>
        </el-upload>
        <div class="qilin-addressBook-import-file">
            <span>已上传文件：</span>
            <div class="qilin-addressBook-import-file-list">
                <div class="qilin-addressBook-import-file-list-item"
                    v-for="item in importFiles" :key="item.uid"
                >
                    <img src="@/assets/images/file.png" alt="">
                    <span>{{item.name}}</span>
                    <img src="@/assets/images/file-delete.png" alt="" @click="deleteFile(item)">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 接收来自父组件的值
const propsValue=defineProps({
    importConfig:{
        type:Object,
        default(){
            return {
                downloadTemplateConfig:{ //下载模板元素配置项
                    isShow:true, //是否显示下载模板元素，默认显示
                    templateName:"模板.xls", //模板名称
                },
                fileType:["xls","xlsx","doc","docx","pdf"], //上传文件类型
            }
        }
    }
});

// 暴露父组件的自定义方法
const emits=defineEmits(["update:importConfig","importTemplate"]);

// 组件自身的配置项
const ownImportConfig=computed({
    get(){
        return propsValue.importConfig;
    }
});
// 获取文件类型文字方法
const getFileTypeText = computed({
    get(){
        return ownImportConfig.value.fileType ? ownImportConfig.value.fileType.join("、") : ["xls","xlsx","doc","docx","pdf"].join("、")
    }
});
// 上传文件数据集
const importFiles=reactive([]);

// 选中文件事件监听
const changeUpload=(file,files)=>{
    if(importFiles.length !== 0){
        ElMessage({
            message:"只可上传一个文件",
            type:"warning"
        });
        return;
    };
    const fileType=file.name.split(".").pop().toLowerCase();
    if(ownImportConfig.value.fileType && ownImportConfig.value.fileType.length>0){
        if(!ownImportConfig.value.fileType.includes(fileType)){
            ElMessage({
                message:"请上传正确格式的文件",
                type:"warning"
            });
        }else{
            importFiles.push(file);
        };
    }else{
        if(!["xls","xlsx","doc","docx","pdf"].includes(fileType)){
            ElMessage({
                message:"请上传正确格式的文件",
                type:"warning"
            });
        }else{
            importFiles.push(file);
        };
    };
};
// 点击删除列表文件事件监听
const deleteFile=(file)=>{
    const index=importFiles.findIndex((item)=>{
        return item.uid === file.uid;
    });
    importFiles.splice(index,1);
};
// 清空文件列表事件监听
const cleanFileList=()=>{
    importFiles.splice(0,1);
};

// 暴露子组件的方法
defineExpose({
    importFiles,
    cleanFileList
});

</script>

<style lang="scss" scoped>
.qilin-addressBook-import{
    padding:0 20px;
    >.qilin-addressBook-import-template{
        display:flex;
        align-items:center;
        margin-bottom:15px;
        >.qilin-addressBook-import-template-text{
            
        }
        >.qilin-addressBook-import-template-file{
            display:flex;
            align-items:center;
            color:var(--qilin-color-primary);
            >img{
                width:16px;
                height:16px;
            }
            >span{
                margin-left:6px;
                cursor:pointer;
            }
        }
    }
    >.qilin-addressBook-import-file{
        display:flex;
        margin-top:20px;
        >span{
            width:100px;
        }
        >.qilin-addressBook-import-file-list{
            flex:1;
            >.qilin-addressBook-import-file-list-item{
                display:flex;
                align-items:center;
                justify-content: space-between;
                margin-bottom:10px;
                >img{
                    width:15px;
                    height:15px;
                }
                >span{
                    color:var(--qilin-color-primary);
                    margin:0 6px;
                    cursor:pointer;
                    flex:1;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
            }
        }
    }
}
</style>
